<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <title>曦雨的作业</title>
  </head>
  <body style="margin: 0">
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
    <canvas id="cvs" style="position: fixed; z-index: -111"></canvas>
    <video id="v1" src="./src/views/imgs/凛.mp4" autoplay muted loop></video>
  </body>
  <script>
    const cvs = document.querySelector("#cvs");
    const ctx = cvs.getContext("2d");
    const { clientWidth: width, clientHeight: height } =
      document.documentElement;
    cvs.width = width;
    cvs.height = height;
    ctx.fillStyle = "#ffffff";
    const bgColors = Array.from(new Array(400)).map((v) => {
      return {
        x: Math.random() * width,
        y: Math.random() * height,
        step: Math.random() * 2.5 + 0.5,
      };
    });
    const render = () => {
      ctx.clearRect(0, 0, width, height);
      ctx.beginPath();
      bgColors.forEach((v) => {
        v.y = v.y > height ? 0 : v.y + v.step;
        v.x = v.x < 0 ? width : v.x - v.step;
        ctx.rect(v.x, v.y, 3, 3);
      });
      ctx.fill();
      requestAnimationFrame(render);
    };
    render();

    document.addEventListener(
      //监听鼠标与滚轮，，取消缩放操作
      "mousewheel",
      function (event) {
        event = event || window.event;
        if (event.wheelDelta && event.ctrlKey) {
          event.preventDefault();
        }
      },
      {
        capture: false,
        passive: false,
      }
    );
  </script>
</html>
